<template>
  <a-card :bordered="false">  
<a-tabs>
    <a-tab-pane key="1">
      <template #tab>
        <span>
        
          车辆
        </span>
      </template>
      <a-table
      ref="table"
      :columns="Carcolumns"
      :dataSource="Cardata"
      :pagination="pagination"
      :loading="loading"
      :rowKey="(row) => row.Id"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="false"
      size="middle"
    >
    <template slot="Status" slot-scope="text">
      <span v-if="text == '1'"><a-tag color="green">已审核</a-tag></span>
      <span v-if="text == '0'"><a-tag color="red">待审核</a-tag></span>
    </template>
    <template slot="CarfrontPhoto" slot-scope="text,record">
      <img @click="imagecli(record.Id)" style="width:100px;height:60px" :src="text" />
    </template>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="EditCar(record.Id)">修改</a>
        </template>
      </span>
      
    </a-table>
    </a-tab-pane>
    <a-tab-pane key="2">
      <template #tab>
        <span>
          
          设备
        </span>
      </template>
      <a-table
      ref="table"
      :columns="Drivicecolumns"
      :dataSource="Devicedata"
      :pagination="pagination1"
      :loading="loading1"
      :rowKey="(row) => row.Id"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys1, onChange: onSelectChange }"
      :bordered="false"
      size="middle"
    >
    <template slot="Status" slot-scope="text">
      <span v-if="text == '1'"><a-tag color="green">已审核</a-tag></span>
      <span v-if="text == '0'"><a-tag color="red">待审核</a-tag></span>
    </template>
    <template slot="DevicefrontPhoto" slot-scope="text,record">
      <img @click="imagecli1(record.Id)" style="width:100px;height:60px" :src="text" />
    </template>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="EditDevice(record.Id)">修改</a>
        </template>
      </span>
      
    </a-table>
    </a-tab-pane>
  </a-tabs>

  <a-modal
    title="图片"
    width="40%"
    :visible="ImageVis"
    @cancel="
      () => {
        this.ImageVis = false
      }
    "
  >
        <a-carousel style="height:490px" :after-change="onChange">
          <template v-for="item in ImageInfo">
          <div :key="item+1" style="widht:100%;height:400px">  <img :src="item" style="widht:100%;height:450px"/></div>
          </template>
        </a-carousel>
      </a-modal>

       <a-modal
    title="图片"
    width="40%"
    :visible="DeviceVis"
    @cancel="
      () => {
        this.DeviceVis = false
      }
    "
  >
        <a-carousel style="height:490px" :after-change="onChange">
          <template v-for="item in ImageInfo1">
          <div :key="item+1" style="widht:100%;height:400px">  <img :src="item" style="widht:100%;height:450px"/></div>
          </template>
        </a-carousel>
      </a-modal>

      <edit-form ref="editForm" :parentObj="this"></edit-form>
      <device-form ref="devicefrom" :parentObj="this"></device-form>
  </a-card>
</template>


<script>
import EditForm from '../../Base_leasesystem_car/leasesystem_car/EditForm.vue'
import DeviceForm from '../../Base_Leasesystem_equipment/leasesystem_equipment/EditForm.vue'
const Drivicecolumns = [
  { title: '设备编号', dataIndex: 'DeviceNo', width: '20%' },
  { title: '品牌及规格', dataIndex: 'DeviceBrandModel', width: '20%' },
  { title: '照片', dataIndex: 'DevicefrontPhoto', width: '20%' ,scopedSlots:{ customRender:'DevicefrontPhoto'}},
  { title: '审核状态', dataIndex: 'Status', width: '15%',scopedSlots:{ customRender:'Status'} },
  { title: '添加日期', dataIndex: 'CreateTime', width: '20%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } , width: '5%'},
];
const Carcolumns = [
  { title: '车型', dataIndex: 'CarBrandModel', width: '20%' },
  { title: '车牌号', dataIndex: 'CarNo', width: '20%' },
  { title: '照片', dataIndex: 'CarfrontPhoto', width: '20%' ,scopedSlots:{ customRender:'CarfrontPhoto'}},
  { title: '审核状态', dataIndex: 'Status', width: '15%',scopedSlots:{ customRender:'Status'} },
  { title: '添加日期', dataIndex: 'CreateTime', width: '20%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } , width: '5%'},
];
const onChange = current => {
      console.log(current);
    };
export default {
 components: {
    EditForm,
    DeviceForm
  },
  created() {
    this.getDataList()
    this.getDataList1()
  },
  data() {
    return {
      ImageInfofirst:"",
      DeviceVis:false,
      ImageVis:false,
      visible:false,
      ImageInfo:[],
      ImageInfo1:[],
      selectedRowKeys: [],
      selectedRowKeys1: [],
      loading: false,
      loading1: false,
      sorter: { field: 'Id', order: 'asc' },
      sorter1: { field: 'Id', order: 'asc' },
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
      },
      pagination1: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
      },
      Cardata: [],
      Carcolumns,
      Drivicecolumns,
      Devicedata:[]
    }
  },
  methods: {
    EditDevice(id) {
      this.$refs.devicefrom.openForm(id,1)
    },
    EditCar(id) {
      this.$refs.editForm.openForm(id)
    },
    imagecli(row){
      this.DeviceImgFull(row,true)
      this.ImageVis = true
    },
    imagecli1(row){
      this.DeviceImgFull(row,false)
      this.DeviceVis = true
    },
    onChange,
    getDataList() {
      this.selectedRowKeys = []

      this.loading = true
      this.$http
        .post('/Base_leasesystem_car/leasesystem_car/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters,
        })
        .then((resJson) => {
          this.loading = false
          
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
          this.Cardata = resJson.Data
          console.log(this.Cardata)
        })
        
    },
    getDataList1() {
      this.selectedRowKeys1 = []

      this.loading1 = true
      this.$http
        .post('/Base_Leasesystem_equipment/leasesystem_equipment/GetDataList', {
          PageIndex: this.pagination1.current,
          PageRows: this.pagination1.pageSize,
          SortField: this.sorter1.field || 'Id',
          SortType: this.sorter1.order,
          Search: this.queryParam,
          ...this.filters,
        })
        .then((resJson) => {
          this.loading1 = false
          
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
          this.Devicedata = resJson.Data
          this.ImageInfo1.push(resJson.Data)
        })
        
    },
    DeviceImgFull(index,isCar){//  ID值  车辆|设备  
        if(isCar){
          for(var i=0;i<this.Cardata.length;i++){
            if(this.Cardata[i].Id == index){
              this.ImageInfo = []
              if(this.Cardata[i].VehiclelicensePhoto){
                this.ImageInfo.push(this.Cardata[i].VehiclelicensePhoto)
              }
              if(this.Cardata[i].BuyCarInvoicePhoto){
                this.ImageInfo.push(this.Cardata[i].BuyCarInvoicePhoto)
              }
              if(this.Cardata[i].CompulsoryinsurancePhoto){
                this.ImageInfo.push(this.Cardata[i].CompulsoryinsurancePhoto)
              }
              if(this.Cardata[i].CommercialinsurancePhoto){
                this.ImageInfo.push(this.Cardata[i].CommercialinsurancePhoto)
              }
              if(this.Cardata[i].CarfrontPhoto){
                this.ImageInfo.push(this.Cardata[i].CarfrontPhoto)
              }
              if(this.Cardata[i].CarbackPhoto){
                this.ImageInfo.push(this.Cardata[i].CarbackPhoto)
              }
              console.log(this.ImageInfo)
              break;
            }
          }
        }else{
          for(var i=0;i<this.Devicedata.length;i++){
            if(this.Devicedata[i].Id == index){
              this.ImageInfo1 = []
              if(this.Devicedata[i].VehiclelicensePhoto){
                this.ImageInfo1.push(this.Devicedata[i].VehiclelicensePhoto)
              }
              if(this.Devicedata[i].BuyDeviceInvoicePhoto){
                this.ImageInfo1.push(this.Devicedata[i].BuyDeviceInvoicePhoto)
              }
              if(this.Devicedata[i].CompulsoryinsurancePhoto){
                this.ImageInfo1.push(this.Devicedata[i].CompulsoryinsurancePhoto)
              }
              if(this.Devicedata[i].CommercialinsurancePhoto){
                this.ImageInfo1.push(this.Devicedata[i].CommercialinsurancePhoto)
              }
              if(this.Devicedata[i].DevicefrontPhoto){
                this.ImageInfo1.push(this.Devicedata[i].DevicefrontPhoto)
              }
              if(this.Devicedata[i].DevicesidePhoto){
                this.ImageInfo1.push(this.Devicedata[i].DevicesidePhoto)
              }
              if(this.Devicedata[i].DeviceNameplate){
                this.ImageInfo1.push(this.Devicedata[i].DeviceNameplate)
              }
              if(this.Devicedata[i].DeviceCertification){
                this.ImageInfo1.push(this.Devicedata[i].DeviceCertification)
              }
              console.log(this.ImageInfo1)
              break;
            }
          }
        }
    },
   onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    handleTableChange1(pagination, filters, sorter) {
      this.pagination1 = { ...pagination }
      this.filters1 = { ...filters }
      this.sorter1 = { ...sorter }
      this.getDataList1()
    },
  },
}
</script>

<style>
/* For demo */
.ant-carousel {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
</style>